<!--  -->
<template>
<div>

  <xlHeader >分类</xlHeader>

        <!--品牌分类列表-->
        <div class="brand-list">
	        <em>品牌分类</em>
	        <ul>
                <li v-for="(item,index) in cate" :key="item._id">
                  
                  <router-link  :to="{path:'/goodsList',query:{cate_id:index+1,title:item.name}}">
                    <img :src="item.img" /></router-link>
                  </li>
          </ul>
            <!-- <div class="more"><a href="#">显示全部</a></div> -->
        </div>
		<!--底部-->
     <xlFooter :act="1"></xlFooter>
</div>
</template>
<script>
export default{
  name:'cate',
  data(){
    return{
          cate:[]
    }
  },
  mounted(){
     this.get_cate()
  },
  methods:{

     get_cate(){

          this.$http.get('/api/get_cate')
          .then(res=>{
            console.log(res)
            if(res.code==1){
              this.cate = res.data;
            }
          })
     }

  }


}



</script>
<style lang='scss'>



.product-list,.brand-list{
	overflow: hidden;
	margin-bottom: 10px;
	padding-top: 53px;
}
.product-list li,.brand-list li{
	width: 33.33333%;
	display: table;
	float: left;
	background: #fff;
	text-align: center;
	border-bottom: 1px solid #E1E5EE;
	border-right: 1px solid #E1E5EE;
}
.product-list li img{
	max-width: 100%;
	width: 100px;
	height: 100px;
}
.brand-list em{
	padding-left:20px;
	font-weight: bold;
	padding:0 10px;
	border-bottom: 1px solid #E1E5EE;
	line-height: 35px;
	background: #fff;
	display: block;
	margin-right: 4px;
	color: #FF9900;
}
.brand-list li{
	padding: 20px 0;
}
.brand-list li img{
	max-width: 100px;
	width: 70%;
}
.loading{
	text-align: center;
}
.loading img{
	margin-top: 10px;
	width: 16px;
	height: 16px;
}


.more {
    clear: both;
    text-align: center;
    padding-top: 10px;
}

.more a {
    display: block;
    width: 120px;
    margin: 0 auto;
    line-height: 24px;
    border: 1px solid #AAA;
}


 
</style>